<template>
    <view>
        <view class="register-title" v-if="!props.isPage">
            个性标签
        </view>
        <template v-for="(item, i) in state.listData" :key="item.ID">
            <view class="register-tip">
                <view class="register-tip-left">
                    <text>{{ item.name }}</text>
                    <text>({{ item.checkLabel.length }}/{{ item.maxLength }})</text>
                </view>
                <view class="register-tip-right" @click="updateFn(item, i)">
                    <text>换一批</text><van-icon name="replay" />
                </view>
            </view>
            <view class="register-birthday">
                <text class="personal-label" :class="item.checkLabel.includes(itemChild.ID) ? 'personal-label-cur' : ''"
                    v-for="itemChild in item.labelList" :key="itemChild.ID" @click="checkFn(item, itemChild)">{{
                        itemChild.TagName }}</text>
            </view>
        </template>
    </view>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from "vue"
import {
    registerTag
} from '@/api/register/index.js'

let { proxy } = getCurrentInstance()

import { getAuthorization, setAuthorization } from "@/utils/auth.js"

const emits = defineEmits(["update:updateUserTagFn"])

let props = defineProps({
    isPage: {
        type: Boolean,
        default: false
    },
    tagsList: {
        type: Array,
        default: () => []
    }
})

const state = reactive({
    value: "",
    listData: [
        {
            id: 1,
            name: "交友偏好",
            maxLength: 3,
            labelList: [],
            checkLabel: [],
        },
        {
            id: 2,
            name: "自我描述",
            maxLength: 6,
            labelList: [],
            checkLabel: [],
        },
        {
            id: 3,
            name: "兴趣爱好",
            maxLength: 6,
            labelList: [],
            checkLabel: [],
        }
    ],
    resData: []
})

const checkFn = (item, itemChild) => {
    let curIndex = state.listData.findIndex(o => o.id == item.id)
    let clickIndex = state.listData[curIndex].checkLabel.indexOf(itemChild.ID)
    let len = state.listData[curIndex].checkLabel.length
    if (state.listData[curIndex].checkLabel.includes(itemChild.ID)) {
        state.listData[curIndex].checkLabel.splice(clickIndex, 1)
    } else {
        if (len < item.maxLength) state.listData[curIndex].checkLabel.push(itemChild.ID)
    }
}

// 更换一批
const updateFn = (item, i) => {
    let arrAll = state.resData[i].Tags
    let lastItem = item.labelList[item.labelList.length - 1]
    let curIndex = arrAll.findIndex(o => o.ID == lastItem.ID)
    if (arrAll.length > (curIndex + 1)) {
        state.listData[i].labelList = arrAll.slice(curIndex + 1, (curIndex + 9))
    } else {
        state.listData[i].labelList = arrAll.slice(0, 8)
    }
}

const updateUserTag = () => {
    let params = {
        "value": [
            { "state": 0, "tagGroupCode": "JYPH", "tags": [] },
            { "state": 0, "tagGroupCode": "ZWMS", "tags": [] },
            { "state": 0, "tagGroupCode": "XQSC", "tags": [] }]
    }
    params.value.forEach((o, i) => {
        o.tags = state.listData[i].checkLabel
    })
    emits("update:updateUserTagFn", params)
}

onMounted(async () => {
    let data = await proxy.$get(registerTag)
    if (data.code == 200) {
        state.resData = data.data
        state.listData.forEach((o, i) => {
            o.id = state.resData[i].ID
            o.name = state.resData[i].ShowName
            o.labelList = state.resData[i].Tags.slice(0, 8)
            o.len = state.resData[i].Tags.length
            if (props.isPage) {
                o.checkLabel = o.labelList.filter(o => props.tagsList.includes(o.TagName)).map(o => o.ID)
            }
        })
    }
})

defineExpose({
    updateUserTag,
})

</script>

<style lang="scss" scoped>
.register-box {
    padding: 30rpx 70rpx;
}

.register-title {
    color: #262626;
    font-size: 48rpx;
    margin-top: 80rpx;
    font-weight: 800;
}

.register-tip {
    margin-top: 34rpx;
    display: flex;
    justify-content: space-between;

    .register-tip-left {
        text:nth-child(1) {
            font-weight: 800;
        }

        text:nth-child(2) {
            color: #999;
            margin-left: 20rpx;
        }
    }

    .register-tip-right {
        color: #999;
    }
}

.register-birthday {
    display: flex;
    flex-wrap: wrap;
    width: 800rpx;

    .personal-label {
        display: inline-block;
        flex: none;
        width: 144rpx;
        height: 56rpx;
        line-height: 56rpx;
        font-size: 28rpx;
        color: #6D6D6D;
        background: #EEEEEE;
        text-align: center;
        border-radius: 8rpx;
        margin-top: 34rpx;
        margin-right: 20rpx;
    }

    .personal-label-cur {
        color: #fff;
        background: #262626;
    }
}
</style>
